<template>
	<scroll-view :scroll-into-view="`cIndex${cIndex}`" :scroll-with-animation="true" class="content" :scroll-x="true" style="white-space: nowrap;">
		<view class="inline pd fz15 classifyItem" @tap="switchClassify(index)" v-for="( item , index) in list" :key="index"
		:id="`cIndex${index}`" :class="{'main': cIndex == index , 'father' : showUnderline }" >
			{{item.title}}
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: 'classifyList',
		data() {
			return {
				cIndex : -1
			};
		},
		props: {
			value : {
				default : ""
			},
			list : {
				type: Array ,
				default: function(e){
					return [] ;
				}
			},
			showUnderline : {
				default : false 
			}
		},
		
		created() {
			this.initIndex();
		},
		
		updated() {
			this.initIndex();
		},
		
		methods: {
			
			initIndex:function(e){
				for (var i = 0; i < this.list.length; i++) {
					var cur = this.list[i] ;
					if(cur.value == this.value){
						this.cIndex = i ;
						return ;
					}
				}
				if(this.list.length > 0 && this.cIndex == -1){
					this.cIndex = 0 ;
					this.switchClassify(0);
				}
			},
			
			switchClassify:function(index){
				this.cIndex = index ;
				var value = this.list[index].value;
				uni.setStorageSync("lastClassify" , value );
				this.$emit("change",{ index , id : value });
			},
		}
	}
</script>

<style lang="scss">
.classifyItem.father.main{
	&:after{
		content:"";
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 50upx;
		margin-left: -25upx;
		height: 6upx;
		background-color: $main;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		animation:toBig 0.4s ;
	}
}
@keyframes toBig{
	from{
		transform: scale(0);
	}
	to{
		transform:scale(1);
	}
}
</style>
